<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="讲师姓名" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入讲师姓名"/>
      </el-form-item>
      <el-form-item label="头像" prop="avatarpath">
        <UploadImage @change="imageChange" :path="form.avatarpath"></UploadImage>
      </el-form-item>
      <el-form-item label="头衔" prop="position">
        <el-input v-model="form.position" @keyup.enter.native="submitForm" placeholder="请输入头衔"/>
      </el-form-item>
      <el-form-item label="讲师推荐">
        <el-radio-group v-model="form.recommend" size="small">
          <el-radio label="1" border>是</el-radio>
          <el-radio label="0" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="desc">
        <el-input v-model="form.desc" type="textarea" :rows="5" placeholder="请输入讲师简介"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
        <span v-if="!addLoading">提 交</span>
        <span v-else>提 交 中...</span>
      </el-button>
      <!--<el-button @click="cancel">取 消</el-button>-->
    </div>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  import {addLecturer, editLecturer} from "@/api/college/lecturer";

  export default {
    components: {UploadImage},
    props: {
      row: {
        type: Object,
        require: false
      }
    },
    data() {
      return {
        addLoading: false,
        form: {
          id:undefined,
          nickname: '',
          recommend: "0",
          position: "",
          desc: "",
          avatarpath: ''
        },
        rules: {
          nickname: [
            {required: true, message: '请输入讲师昵称', trigger: 'blur'},
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          avatarpath: [
            {required: true, message: '图像不能为空'}
          ],
          position: [
            {required: true, message: '请输入头衔', trigger: 'blur'},
            {min: 2, max: 10, message: '长度2-10个字符', trigger: 'blur'}
          ],
          desc: [
            {min: 10, max: 350, message: '长度10-350个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      if (this.row) {
        this.form = {
          id: this.row.id,
          nickname: this.row.nickname,
          recommend:this.row.recommend+"",
          position: this.row.position,
          desc: this.row.desc,
          avatarpath: this.row.avatarpath
        }
      }
    },
    methods: {
      submitForm() {
        let _this = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id) {
              editLecturer(this.form).then(response => {
                this.msgSuccess("编辑成功");
                this.addLoading = false;
                this.$emit('goBack', 'editLecturer');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            } else {
              this.addLoading = true;
              addLecturer(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.addLoading = false;
                this.$emit('goBack', 'addLecturer');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            }
          }
        });
      },
      imageChange(message) {
        this.$set(this.form, 'avatarpath', message);
        this.$refs.form.validateField('avatarpath');
      },
    }
  }
</script>

<style scoped>

</style>
